<template>
	<view>
		<view class="Box">
			<view class="Main">
				<view style="margin-bottom: 10px;">
					<h5>点击头像框上传头像</h5>
				</view>
				<view class="update_avatar">
					<image :src="updateForm.avatar" @click="changeImg"></image>
				</view>
				<view class="Info">
					<uni-forms :modelValue="updateForm" labelWidth="80px" labelAlign="center">
						<uni-forms-item label="昵称">
							<uni-easyinput v-model="updateForm.nickname" :clearable="false" />
						</uni-forms-item>
						<uni-forms-item label="性别">
							<radio-group style="margin-top: 8px;" @change="radioChange">
								<label>
									<radio value="男" :checked="sex" style="transform:scale(0.7);margin-left: -15px;" />
									<text>男</text>
								</label>
								<label>
									<radio value="女" :checked="!sex" style="transform:scale(0.7);margin-left: 15px;" />
									<text>女</text>
								</label>
							</radio-group>
						</uni-forms-item>
						<uni-forms-item label="个人描述">
							<uni-easyinput type="textarea" v-model="updateForm.description" :clearable="false" />
						</uni-forms-item>
					</uni-forms>

				</view>
				<view class="buttons">
					<button type="default" size="mini" @click="reSet">重置</button>
					<button type="primary" size="mini" @click="updateInfo">提交</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				updateForm: {
					nickname: '',
					gender: '',
					description: ''
				},
				tempFilePaths: '',

			};
		},
		computed: {
			...mapState('my_Info', ['userInfo']),
			sex() {
				return this.updateForm.gender == '男'
			}
		},
		created() {

			this.updateForm = this.userInfo
			this.updateForm.avatar = 'http://cdn.gdxywsw.club/' + this.updateForm.avatar
		},
		mounted() {

		},
		methods: {
			radioChange(e) {
				this.updateForm.gender = e.detail.value
			},

			changeImg() {
				console.log(this.tempFilePaths, 0);
				uni.chooseImage({
					count: 1,
					success: (res) => {
						console.log(res);
						this.tempFilePaths = res.tempFilePaths[0]


						if (res.tempFiles.size > 5242880) {
							uni.showToast({
								title: '图片过大!',
								duration: 1500,
								icon: "error"
							})
							return
						}
						this.updateForm.avatar = res.tempFilePaths[0]
					}

				})
			},

			async updateAvatar() {

				let res = await uni.uploadFile({
					url: 'http://124.70.108.19:81/wsw/images/updateAvatar',
					filePath: this.tempFilePaths,
					name: 'imgFile',
					header: {
						cookie: JSON.parse(uni.getStorageSync('WSWUser'))
					}
				})

				if (res[1].statusCode != 200) {
					uni.showToast({
						title: '图片上传失败',
						duration: 1500,
						icon: 'none'
					})
					return
				}
			},
			async updateInfo() {
				let {
					nickname,
					gender,
					description
				} = this.updateForm
				let param = {
					nickname,
					gender,
					description
				}

				this.updateAvatar()

				let {
					data: res
				} = await uni.$http.post('/users/update', param)
				if (res.code == 2000) {
					uni.showToast({
						title: '修改成功',
						duration: 1500,
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: '修改信息失败!',
						duration: 1500,
						icon: 'error'
					})
				}
			},
			reSet() {
				this.updateForm = {}
			}
		}
	}
</script>

<style lang="less">
	.Box {
		padding: 0 10px;
		padding-top: 20px;

		font-size: 14px;

		.update_avatar {
			display: flex;
			justify-content: center;

			image {
				width: 200px;
				height: 200px;
				object-fit: cover;
				border-radius: 50%;
				border: 1px dashed #a6a6a6;
			}
		}

	}

	.Main {
		text-align: center;
	}

	.Info {
		margin-top: 20px;
		margin-right: 60px;
	}

	.buttons {
		display: flex;
		justify-content: space-around;
	}
</style>
